import React, { useState, useEffect } from 'react';
import { Card, Button, Modal, Input, Form, message, Avatar, Tag } from 'antd';
import { PlusOutlined, UserOutlined } from '@ant-design/icons';
import './InterestCircle.css';

interface Circle {
    id: string;
    name: string;
    description: string;
    memberCount: number;
    tags: string[];
    creator: {
        id: string;
        name: string;
        avatar?: string;
    };
}

interface InterestCircleProps {
    onJoinCircle?: (circleId: string) => void;
    onCreateCircle?: (circleData: Omit<Circle, 'id' | 'memberCount'>) => void;
}

const InterestCircle: React.FC<InterestCircleProps> = ({
    onJoinCircle,
    onCreateCircle
}) => {
    const [circles, setCircles] = useState<Circle[]>([]);
    const [isCreateModalVisible, setIsCreateModalVisible] = useState(false);
    const [form] = Form.useForm();

    // 模拟获取圈子数据
    useEffect(() => {
        // TODO: 从API获取圈子数据
        const mockCircles: Circle[] = [
            {
                id: '1',
                name: '摄影爱好者',
                description: '分享摄影技巧，交流拍摄经验',
                memberCount: 128,
                tags: ['摄影', '艺术'],
                creator: {
                    id: '1',
                    name: '张三',
                    avatar: ''
                }
            },
            {
                id: '2',
                name: '美食探索家',
                description: '发现美食，分享美食，品味生活',
                memberCount: 256,
                tags: ['美食', '生活'],
                creator: {
                    id: '2',
                    name: '李四',
                    avatar: ''
                }
            }
        ];
        setCircles(mockCircles);
    }, []);

    const handleCreateCircle = async () => {
        try {
            const values = await form.validateFields();
            onCreateCircle?.(values);
            setIsCreateModalVisible(false);
            form.resetFields();
            message.success('圈子创建成功');
        } catch (error) {
            console.error('创建圈子失败:', error);
        }
    };

    return (
        <div className="interest-circle">
            <div className="circle-header">
                <h2>兴趣圈子</h2>
                <Button
                    type="primary"
                    icon={<PlusOutlined />}
                    onClick={() => setIsCreateModalVisible(true)}
                >
                    创建圈子
                </Button>
            </div>

            <div className="circle-list">
                {circles.map(circle => (
                    <Card key={circle.id} className="circle-card">
                        <div className="circle-info">
                            <h3>{circle.name}</h3>
                            <p>{circle.description}</p>
                            <div className="circle-tags">
                                {circle.tags.map(tag => (
                                    <Tag key={tag} color="#FF7D00">{tag}</Tag>
                                ))}
                            </div>
                            <div className="circle-meta">
                                <Avatar
                                    icon={<UserOutlined />}
                                    src={circle.creator.avatar}
                                    size="small"
                                />
                                <span className="creator-name">{circle.creator.name}</span>
                                <span className="member-count">{circle.memberCount}人</span>
                            </div>
                        </div>
                        <Button
                            type="primary"
                            onClick={() => onJoinCircle?.(circle.id)}
                            className="join-button"
                        >
                            加入圈子
                        </Button>
                    </Card>
                ))}
            </div>

            <Modal
                title="创建兴趣圈子"
                visible={isCreateModalVisible}
                onOk={handleCreateCircle}
                onCancel={() => setIsCreateModalVisible(false)}
                okText="创建"
                cancelText="取消"
            >
                <Form form={form} layout="vertical">
                    <Form.Item
                        name="name"
                        label="圈子名称"
                        rules={[{ required: true, message: '请输入圈子名称' }]}
                    >
                        <Input placeholder="请输入圈子名称" />
                    </Form.Item>
                    <Form.Item
                        name="description"
                        label="圈子简介"
                        rules={[{ required: true, message: '请输入圈子简介' }]}
                    >
                        <Input.TextArea
                            placeholder="请输入圈子简介"
                            rows={4}
                            maxLength={200}
                            showCount
                        />
                    </Form.Item>
                    <Form.Item
                        name="tags"
                        label="兴趣标签"
                        rules={[{ required: true, message: '请选择兴趣标签' }]}
                    >
                        <Input placeholder="请输入兴趣标签，用逗号分隔" />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default InterestCircle; 